﻿<template>
    <div>
        <h2>你好,欢迎来到News路由组件</h2>
        <ul>
            <li :style="{opacity}">欢迎学习Vue</li>
            <li>news1 <input type="text"></li>
            <li>news2 <input type="text"></li>
            <li>news3 <input type="text"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'News',
        components:{},
        data(){
            return{
                opacity:1
            }
        },
        /* beforeDestroy(){
            clearInterval(this.timer)//即将被销毁时清除定时器
        },
        mounted(){
            console.log('mounted',this)
            this.timer = setInterval(()=>{
                console.log('@')//查看定时器是否在运行
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        } */
        activated(){
            console.log('News组件被激活了')
            this.timer = setInterval(()=>{
                console.log('@')
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated(){
            console.log('News组件失活了')
            clearInterval(this.timer)
        },
    }
</script>

<style scoped>

</style>